<!--  -->
<template>
    <div class='archive'>
        <a-row type="flex" justify="center" align="top" style="margin: 15px 0;">
            <a-col :span="15" style="height: 99%;" :xs="23" :sm="23" :md="23" :lg="23" :xl="15">
                <a-card title="归档" style="width: 98%;margin: auto;">

                    <div class="timeline-box shadow">
                        <div class="timeline-main">
                            <div class="timeline-line"></div>

                            <div class="timeline-year" v-for="(value, key, index) in blogArchive">
                                <h2><a class="yearToggle">{{key + '年'}}</a>
                                    <a-icon type="caret-right" />
                                </h2>
                                <div class="timeline-month">
                                    <ul>
                                        <li v-for="blog in value">
                                            <div class="h4 animated fadeInLeft">
                                                <p class="date">{{blog.createTime}}</p>
                                            </div>
                                            <p class="dot-circle animated ">
                                                <a-icon type="history" />
                                            </p>
                                            <div class="content animated fadeInRight">
                                                <h4 style="font-size: 20px;color: #67b3ef">
                                                    <router-link :to="'blog/' + blog.id" style="color: #67b3ef">
                                                        {{blog.title}}
                                                    </router-link>
                                                </h4>
                                                <p style="font-size: 12px;margin-top: 10px;">
                                                    {{blog.description}}
                                                </p>
                                            </div>
                                            <div class="clear"></div>
                                        </li>

                                    </ul>
                                </div>
                            </div>

                            <!-- <div class="timeline-year">
								<h2><a class="yearToggle">2018 年</a>
									<a-icon type="caret-right" />
								</h2>
								<div class="timeline-month">
									<ul>
										<li>
											<div class="h4 animated fadeInLeft">
												<p class="date">10月24日</p>
											</div>
											<p class="dot-circle ">
												<a-icon type="history" />
											</p>
											<div class="content animated fadeInRight">
												layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
												<br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
												<br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i></div>
											<div class="clear"></div>
										</li>
										<li>
											<div class="h4 animated fadeInLeft">
												<p class="date">09月06日</p>
											</div>
											<p class="dot-circle animated ">
												<a-icon type="history" />
											</p>
											<div class="content animated fadeInRight">
												<p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
												<ul>
													<li>《登高》</li>
													<li>《茅屋为秋风所破歌》</li>
												</ul>
											</div>
											<div class="clear"></div>
										</li>
										<li>
											<div class="h4 animated fadeInLeft">
												<p class="date">08月26日</p>
											</div>
											<p class="dot-circle animated ">
												<a-icon type="history" />
											</p>
											<div class="content animated fadeInRight">
												中国人民抗日战争胜利72周年
												<br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
												<br>铭记、感恩
												<br>所有为中华民族浴血奋战的英雄将士
												<br>永垂不朽
											</div>
											<div class="clear"></div>
										</li>
									</ul>
								</div>
							</div> -->

                        </div>
                    </div>

                </a-card>
            </a-col>

        </a-row>



    </div>
</template>

<script>
    export default {
        //import引入的组件需要注入到对象中才能使用

        components: {},
        data() {
            //这里存放数据
            return {
                blogArchive: {},
            };
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {

        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            this.getBlogArchive();
        },
        //计算属性
        computed: {},
        //方法集合
        methods: {
            // 获取归档数据
            getBlogArchive() {
                this.$axios.get("blogs/archive").then((res) => {
                    // console.log(res);
                    if (res.status != 200) {
                        return this.$message.error(res.message);
                    }
                    this.blogArchive = res.data.data;
                });
            }
        },

    };
</script>
<style>
    .archive {
        /* min-height: 600px; */
        height: 100%;
    }


    .clear {
        clear: both
    }

    .timeline-box {
        background: #fff;
        padding: 20px 8px;
        position: relative;
        opacity: 0.7;
    }

    .timeline-main {
        position: relative;
    }

    .timeline-main>h1 {
        font-size: 18px;
        background: #fff;
        z-index: 1;
        position: relative;
        color: #484348;
        margin-left: 33%;
        margin-left: -moz-calc(35% - 7px);
        margin-left: -webkit-calc(35% - 7px);
        margin-left: calc(35% - 7px)
    }

    .timeline-main>h1>i {
        padding-right: 10px;
        font-size: 20px
    }

    .timeline-main>h1>span {
        display: none
    }

    .timeline-main h2,
    .timeline-main h3 {
        width: 31%;
        text-align: right
    }

    .timeline-main h2,
    .timeline-main h2>a {
        font-size: 16px;
        margin: 5px 0;
        color: #6bc30d
    }

    .timeline-main h3,
    .timeline-main h3>a {
        font-size: 14px;
        margin: 2px 0;
        color: #ff5722
    }

    .timeline-month>ul>li {
        padding: 10px 0
    }

    .timeline-month>ul>li .h4 {
        display: inline-block;
        width: 31%;
        text-align: right;
        float: left
    }

    .date {
        display: inline-block;
        padding: 2px 5px;
        color: #484348;
        font-size: 15px;
        margin-top: 5px
    }

    .dot-circle {
        color: #484348;
        width: 8%;
        text-align: center;
        font-size: 22px;
        z-index: 1;
        position: relative;
        background: #fff;
        float: left
    }

    .content {
        max-width: 50%;
        float: left;
        padding: 20px;
        margin-left: 10px;
        position: relative;
        z-index: 1;
        background: #484348;
        color: #fff
    }

    .content img {
        width: 100%
    }

    .content::before {
        position: absolute;
        left: -20px;
        top: 6px;
        height: 0;
        width: 0;
        content: '';
        border: 10px solid rgba(255, 255, 255, 0);
        border-top: 6px solid rgba(255, 255, 255, 0);
        border-bottom: 6px solid rgba(255, 255, 255, 0);
        border-right-color: #484348
    }

    .timeline-line {
        position: absolute;
        left: 35%;
        top: 0;
        height: 100%;
        width: 2px;
        background: #484348;
        z-index: 0
    }

    .timeline-year {
        margin: 10px 0
    }

    @media(min-width:768px) {
        .timeline-box {
            background: #fff;
            padding: 40px 15px;
            position: relative;
        }

        .timeline-main>h1 {
            font-size: 26px;
            margin-left: 16%;
            margin-left: -moz-calc(18% - 13px);
            margin-left: -webkit-calc(18% - 13px);
            margin-left: calc(18% - 13px)
        }

        .timeline-main>h1>i {
            font-size: 30px
        }

        .timeline-main>h1>span {
            display: inline
        }

        .timeline-main h2,
        .timeline-main h3 {
            width: 16%
        }

        .timeline-main h2,
        .timeline-main h2>a {
            font-size: 24px
        }

        .timeline-main h3,
        .timeline-main h3>a {
            font-size: 20px
        }

        .timeline-month>ul>li .h4 {
            width: 16%
        }

        .dot-circle {
            width: 4%;
            font-size: 22px
        }

        .content {
            max-width: 70%
        }

        .timeline-line {
            left: 18%
        }
    }

    @media(min-width:992px) {
        .timeline-main>h1 {
            font-size: 34px;
            background: #fff;
            z-index: 1;
            position: relative;
            color: #484348;
            margin-left: 17%;
            margin-left: -moz-calc(18% - 16px);
            margin-left: -webkit-calc(18% - 16px);
            margin-left: calc(18% - 16px)
        }

        .timeline-main>h1>i {
            font-size: 36px
        }

        .timeline-main h2,
        .timeline-main h2>a {
            font-size: 30px
        }

        .timeline-main h3,
        .timeline-main h3>a {
            font-size: 24px
        }
    }
</style>